<template>
  <div class="settleinfo" v-if="data.mrcAccount">
    <Header-Comp title="结算信息" />
    <van-form
      class="settleinfo_form"
      validate-first
      input-align="right"
      ref="form"
    >
      <van-field label="账户类型" class="form_account" readonly disabled>
        <template #input>
          <div v-for="(item, index) in mrcTypeList" :key="index">
            <span v-if="item.dictKey == data.merchantAccountType">{{
              item.dictValue
            }}</span>
          </div>
        </template>
      </van-field>
      <!-- <van-field label="对私户信息" v-if="privateoShow" readonly>
        <template #input></template>
      </van-field>-->
      <van-field
        name="img"
        class="field-image"
        v-if="privateoShow && data.merchantAccountType == 1"
      >
        <template #input>
          <van-image :src="justImg" @click="sceneImg(justImg)" />
        </template>
      </van-field>
      <div v-else>
        <div class="attach-item">
          <p class="attach-item-title">银行卡正面</p>
          <div class="upload-content">
            <div class="attach-label">
              <p>请上传卡号面</p>
              <p class="example" @click="lookExample(bankImgExample)">
                查看示例&nbsp;
                <van-icon name="arrow" />
              </p>
            </div>
            <van-uploader
              :after-read="uploadBankCardImg"
              :before-delete="deleteBankCardImg"
              v-model="bankCardList"
              :max-count="1"
              @oversize="onOversize"
            >
              <img src="../../assets/store/bank-img.png" alt />
            </van-uploader>
          </div>
        </div>
        <div class="attach-item">
          <p class="attach-item-title">银行卡反面</p>
          <div class="upload-content">
            <div class="attach-label">
              <p>请上传卡反面</p>
              <p class="example" @click="lookExample(bankImg2Example)">
                查看示例&nbsp;
                <van-icon name="arrow" />
              </p>
            </div>
            <van-uploader
              :after-read="uploadBankCard2Img"
              :before-delete="deleteBankCard2Img"
              v-model="bankCard2List"
              :max-count="1"
              @oversize="onOversize"
            >
              <img src="../../assets/store/bank-img2.png" alt />
            </van-uploader>
          </div>
        </div>
      </div>
      <div class="attach-item" v-if="this.data.merchantAccountType == 3">
        <p class="attach-item-title">商户关系证明</p>
        <div class="upload-content">
          <div class="attach-label">
            <p>请上传商户关系证明</p>
            <p class="example" @click="lookExample(cashierExample)">
              查看示例&nbsp;
              <van-icon name="arrow" />
            </p>
            <p class="example" @click="downloadExample">
              下载模板&nbsp;
              <van-icon name="arrow" />
            </p>
          </div>
          <van-uploader
            :after-read="uploadproofImg"
            :before-delete="deleteproofImg"
            v-model="proofImgList"
            :max-count="1"
            @oversize="onOversize"
          >
            <img src="../../assets/store/proof-img.png" alt />
          </van-uploader>
        </div>
      </div>
      <van-field
        label-width="120px"
        label="开户名称"
        readonly
        disabled
        v-model="data.mrcAccount.accountName"
        v-if="privateoShow"
      />
      <van-field
        v-model="data.mrcAccount.accountIdcard"
        label="证件号码"
        type="string"
        disabled
      />
      <van-field
        label-width="120px"
        v-model="data.mrcAccount.bankAccountMobile"
        label="开户银行手机号"
        placeholder="请输入开户银行手机号"
        :rules="[
          {
            pattern: /^0?(13|14|15|16|17|18|19)[0-9]{9}$/,
            message: '手机号格式错误',
            trigger: 'onChange',
          },
        ]"
      />
      <van-field
        v-model="data.mrcAccount.accountNo"
        type="digit"
        label="银行卡号"
        placeholder="请输入银行卡号"
        :rules="[
          {
            pattern: /\S/,
            message: '请输入银行卡号',
            trigger: 'onBlur',
          },
        ]"
      />
      <van-field
        is-link
        readonly
        v-model="bankNmane"
        label="开户银行"
        placeholder="请选择对公户开户银行名称"
        @click="showPopup(2)"
      />
      <van-field
        v-if="isHide"
        is-link
        readonly
        v-model="areaNmane"
        label="开户省市"
        placeholder="请选择省份、城市"
        @click="showPopup(4)"
      />
      <van-field
        v-if="isHide"
        is-link
        readonly
        v-model="BrancNmane"
        label="开户支行"
        placeholder="请选择开户支行"
        @click="Branchbank1 = true"
      />
    </van-form>
    <div style="margin: 16px">
      <van-button
        @click="onSubmit"
        :disabled="settlement.txType === '手动提现'"
        class="submitbtn"
        size="small"
        round
        block
        type="info"
        >提交</van-button
      >
    </div>
    <van-dialog
      v-model="showExample"
      title="查看示例"
      confirmButtonText="关闭"
      confirmButtonColor="#FFB72F"
    >
      <img :src="exampleImg" class="example-img" />
    </van-dialog>
    <van-popup v-model="show2" position="bottom" :style="{ height: '40%' }">
      <van-picker
        title="选择银行"
        show-toolbar
        :columns="bankList"
        @confirm="selectBank1"
        @cancel="onCancel(2)"
      />
    </van-popup>
    <van-popup v-model="show4" position="bottom" :style="{ height: '40%' }">
      <van-picker
        show-toolbar
        title="请选择地区"
        @change="onAreaChange"
        @cancel="onCancel(4)"
        @confirm="onAreaConfirm1"
        :columns="areaColumns"
      />
    </van-popup>
    <van-popup
      v-model="Branchbank1"
      position="bottom"
      :style="{ height: '100%' }"
    >
      <selectbank1
        @onBranchbank1="getBranchbank1"
        v-if="Branchbank1"
        :bankCity="data.mrcAccount.accountCity"
        :bankTypeId="data.mrcAccount.bankIdHo"
      />
    </van-popup>
  </div>
</template>

<script>
import { ImagePreview } from "vant";
import { imgPreview } from "@/utils/utils.js";
import { Bankdetail, Branchdetail, areadetail, mrctype } from "@/api/mreinfo";
import { uploadImg, bankFontOcr } from "@/api/upload";
import { getBankList } from "@/api/bank";
import { getAreaData, getAreatext } from "@/api/area";
import { save, qryBankActByStoreNoSuc } from "@/api/settleedit";
import { getChannelTemplate } from "@/api/channel";
import { savePicture } from "@/utils/utils.js";


import cashierExample from "@/assets/store/proof-img-example.png";
import bankImgExample from "@/assets/store/bank-img-example.png";
import bankImg2Example from "@/assets/store/bank-img2-example.png";
export default {
  components: {
    selectbank1: () => import("./selectbank1"),
    HeaderComp: () => import("@/components/HeaderComp"),
  },
  data() {
    return {
      cashierExample,
      bankImgExample,
      bankImg2Example,
      exampleImg: "",
      showExample: false,
      data: {},
      bankNmane: "",
      BrancNmane: "",
      areaNmane: "",
      companybankNmane: "",
      companyBrancNmane: "",
      companyareaNmane: "",
      PublicoShow: false,
      mrcTypeList: [],
      justImg: "",
      just2Img: "",
      householdImg: "",
      privateoShow: false,
      male: false,
      bankCardList: [],
      show2: false,
      show4: false,
      bankList: [],
      bankCard2List: [],
      areaColumns: [
        {
          values: [],
          defaultIndex: 0,
        },
        {
          values: [],
          defaultIndex: 0,
        },
        {
          values: [],
          defaultIndex: 0,
        },
      ],
      Branchbank1: false,
      proofImgList: [],
    };
  },
  mounted() {
    this.$toast({
      type: "loading",
      message: "加载中...",
      duration: 1500,
    });

    // if(this.settlement.txType === '手动提现'){
    //     this.$dialog
    //     .alert({
    //       message: `<div style="font-size:16px;line-height:12px;">
    //             <p>当前提现方式为手动提现时,</p><p style="margin-top:20px;">不支持修改结算卡</p> </div>`,
    //       closeOnClickOverlay: true,
    //       confirmButtonColor: "#FFB72F",
    //     })
    //     .then(() => {
    //       this.$router.go(-1)
    //     });
    // }
  },
  created() {
    var data = {
      id: this.$route.query.id,
      type: this.$route.query.type,
    };
    this.$store.dispatch("Getmrcdetail", data).then((res) => {
      mrctype("mrc_acc_type").then((mrctypeRes) => {
        this.mrcTypeList = mrctypeRes.data;
      });
      Bankdetail(res.mrcAccount.bankIdHo).then((bank) => {
        this.bankNmane = bank.data.bankName;
      });
      Branchdetail(res.mrcAccount.bankId).then((Branc) => {
        this.BrancNmane = Branc.data.bankName;
      });
      // areadetail(res.mrcAccount.accountProvince).then(area => {
      //   this.areaNmane = area.data.provinceName
      // })
      getAreatext({
        provinceCode: res.mrcAccount.accountProvince,
        cityCode: res.mrcAccount.accountCity,
        districtCode: res.mrcAccount.accountDistrict,
      }).then((res6) => {
        if (res6.code == 200) {
          const { province, city, district } = res6.data;
          this.areaNmane = province + city + district;
        }
      });
      if (res.merchantAccountType == 2 || res.merchantAccountType == 3) {
        this.justImg = res.mrcAccount.cardImg;
        this.just2Img = res.mrcAccount.card2Img;
        this.bankCardList = [{ url: res.mrcAccount.cardImg }];
        this.bankCard2List = [{ url: res.mrcAccount.card2Img }];
      } else {
        res.mrcAccountAttach.map((v) => {
          if (v.fileType == 5) {
            this.justImg = v.watermarkImg;
            this.bankCardList = [{ url: v.watermarkImg }];
          }
        });
      }
      const householdImg = res.mrcAccountAttach.find(
        (item) => item.fileType === "13"
      );
      this.householdImg = householdImg ? householdImg.watermarkImg : "";

      let merchantAccountType = Number(res.merchantAccountType);
      let merchantType = Number(res.merchantType);
      let data2 = res.mrcAccount;
      if (merchantType == 1 && merchantAccountType == 1) {
        this.male = true;
        data2.companyAccountName = data2.accountName;
        data2.companyAccountNo = data2.accountIdcard;
        data2.companyAccountMobile = data2.bankAccountMobile;
        data2.companyAccountNo = data2.accountNo;
        data2.companyBankIdHo = data2.bankIdHo;
        data2.companyBankId = data2.bankId;
        data2.companyAccountProvince = data2.accountProvince;
      } else if (merchantType == 1 && merchantAccountType == 2) {
        this.male = true;
        this.privateoShow = true;
      } else if (merchantType == 1 && merchantAccountType == 3) {
        this.male = true;
        this.privateoShow = true;
      } else if (merchantType == 2 && merchantAccountType == 1) {
        this.male = true;
        data2.companyAccountName = data2.accountName;
        data2.companyAccountNo = data2.accountIdcard;
        data2.companyAccountMobile = data2.bankAccountMobile;
        data2.companyAccountNo = data2.accountNo;
        data2.companyBankIdHo = data2.bankIdHo;
        data2.companyBankId = data2.bankId;
        data2.companyAccountProvince = data2.accountProvince;
      } else if (merchantType == 2 && merchantAccountType == 2) {
        this.privateoShow = true;
      } else if (merchantType == 2 && merchantAccountType == 3) {
        this.privateoShow = true;
      } else if (merchantType == 3 && merchantAccountType == 2) {
        this.privateoShow = true;
      }
      if (
        (merchantType == 1 && merchantAccountType == 1) ||
        (merchantType == 1 && merchantAccountType == 2) ||
        (merchantType == 1 && merchantAccountType == 3) ||
        (merchantType == 2 && merchantAccountType == 1)
      ) {
        Bankdetail(Number(res.mrcAccount.companyBankIdHo)).then((bank) => {
          this.companybankNmane = bank.data.bankName;
        });
        Branchdetail(Number(res.mrcAccount.companyBankId)).then((bank) => {
          this.companyBrancNmane = bank.data.bankName;
        });
        areadetail(Number(res.mrcAccount.companyAccountProvince)).then(
          (area) => {
            this.companyareaNmane = area.data.provinceName;
          }
        );
      }
      const proofImgList = res.mrcAccountAttach.filter(
        (item) => item.fileType === "19"
      );
      this.proofImgList = proofImgList.map((item) => {
        return {
          url: item.watermarkImg || item.filePath,
        };
      });
      this.data = res;
      this.getChannelTemplateFun(res);
    });
    this.getBankLists();
    this.getProvince("00");
  },
  computed: {
    settlement() {
      return this.$store.state.settlement;
    },
    isHide() {
      return this.data.merchantAccountType == "1";
    },
  },
  methods: {
    onclickleft() {
      document.title = "返回APP";
    },
    // 图片预览
    sceneImg(images) {
      ImagePreview({
        images: [images], //需要预览的图片 URL 数组
        showIndex: false, //是否显示页码
        loop: false, //是否开启循环播放
      });
    },
    lookExample(url) {
      this.exampleImg = url;
      this.showExample = true;
    },
    uploadBankCardImg(file) {
      file.status = "uploading";
      file.message = "上传中...";
      imgPreview(file.file, (params) => {
        if (!params) {
          file.status = "";
          file.message = "";
          this.bankCardList = [];
          return;
        }
        uploadImg(params)
          .then((res) => {
            if (res.code == 200) {
              const { link } = res.data;
              bankFontOcr(link)
                .then((result) => {
                  if (!result.bankInfo) {
                    file.status = "done";
                    // file.message = "OCR识别失败";
                    this.bankCardList = [];
                    this.bankCardList.push({
                      url: link,
                    });
                    this.justImg = link;
                  } else {
                    file.status = "done";
                    this.data.mrcAccount.accountNo = result.cardNo;
                    this.bankCardList = [];
                    this.bankCardList.push({
                      url: link,
                    });
                    this.justImg = link;
                  }
                })
                .catch((error) => {
                  file.status = "done";
                  //   file.message = "OCR识别失败";
                  this.bankCardList = [];
                  this.bankCardList.push({
                    url: link,
                  });
                  this.justImg = link;
                });
            }
          })
          .catch((err) => {
            file.status = "failed";
            file.message = "上传失败";
            this.$toast({
              message: err.msg,
              duration: 2000,
            });
          });
      });
    },
    // 银行卡正面
    deleteBankCardImg() {
      this.$dialog
        .alert({
          title: "移除图片",
          message: "是否确定移除该图片？",
          closeOnClickOverlay: true,
          confirmButtonColor: "#FFB72F",
        })
        .then(() => {
          this.bankCardList = [];
          this.justImg = "";
          //   this.$store.commit("PSetBankCardImg", "");
        });
    },
    showPopup(e) {
      this[`show${e}`] = true;
    },
    getBankLists() {
      getBankList().then((res) => {
        if (res.code == 200) {
          let bankList = res.data;
          let newBankList = [];
          bankList.forEach((i) => {
            newBankList.push({
              text: i.bankName,
              value: i.id,
            });
          });
          this.bankList = newBankList;
        }
      });
    },
    selectBank1(data, index) {
      this.data.mrcAccount.bankIdHo = data.value;
      this.bankNmane = data.text;
      this.show2 = false;
    },
    onCancel(e) {
      this[`show${e}`] = false;
    },
    //当地区选择变化时
    onAreaChange(picker, values, index) {
      if (index == 0) {
        this.getCity(values[index].code);
      } else if (index == 1) {
        this.getDistric(values[index].code);
      }
    },
    getProvince(parentCode) {
      getAreaData(parentCode).then((res) => {
        if (res.code == 200) {
          let data = res.data;
          let areaList = [];
          data.forEach((i) => {
            areaList.push({
              text: i.name,
              code: i.code,
              id: i.id,
            });
          });
          this.areaColumns[0].values = areaList;
          this.getCity(areaList[0].code);
        }
      });
    },
    getCity(parentCode) {
      getAreaData(parentCode).then((res) => {
        if (res.code == 200) {
          let data = res.data;
          let areaList = [];
          data.forEach((i) => {
            areaList.push({
              text: i.name,
              code: i.code,
              id: i.id,
            });
          });
          this.areaColumns[1].values = areaList;
          this.getDistric(areaList[0].code);
        }
      });
    },
    getDistric(parentCode) {
      getAreaData(parentCode).then((res) => {
        if (res.code == 200) {
          let data = res.data;
          let areaList = [];
          data.forEach((i) => {
            areaList.push({
              text: i.name,
              code: i.code,
              id: i.id,
            });
          });
          this.areaColumns[2].values = areaList;
        }
      });
    },
    //点击确定
    onAreaConfirm1(value) {
      let province = "";
      let provinceId = "";
      let city = "";
      let cityId = "";
      let district = "";
      let districtId = "";
      if (value[2] && value[2].code) {
        district = value[2].text;
        districtId = value[2].id;
      }
      if (value[1] && value[1].code) {
        city = value[1].text;
        cityId = value[1].id;
      }
      if (value[0] && value[0].code) {
        province = value[0].text;
        provinceId = value[0].id;
      }
      this.data.mrcAccount.accountProvince = provinceId;
      this.data.mrcAccount.accountCity = cityId;
      this.data.mrcAccount.accountDistrict = districtId;
      this.areaNmane = province + city + district;
      this.show4 = false;
      console.log(provinceId, cityId, districtId);
    },
    getBranchbank1(val) {
      if (val) {
        this.data.mrcAccount.bankId = val.id;
        this.BrancNmane = val.bankName;
        console.log(val);
      }
      this.Branchbank1 = false;
    },
    validIsJoinAct(){
      // 校验是否参加过活动
      return new Promise(rel => {
        const { merchantNo, storeNo } = this.data
        qryBankActByStoreNoSuc({ 
          storeNo: this.$route.query.type == 1 ? merchantNo : storeNo
        }).then(res => {
          // actSts == S 参与过活动
          rel(res.data?.actSts == 'S')
        })
      })
    },
    async onSubmit() {
      if (this.justImg == "") {
        this.$toast({
          message: "请上传银行卡卡号面",
          duration: 2000,
          forbidClick: true,
        });
        return;
      }
      if (this.just2Img == "") {
        this.$toast({
          message: "请上传银行卡反面",
          duration: 2000,
          forbidClick: true,
        });
        return;
      }
      if (
        this.data.merchantAccountType == 3 &&
        this.proofImgList.length === 0
      ) {
        this.$toast({
          message: "请上传商户关系证明",
          duration: 2000,
          forbidClick: true,
        });
        return;
      }
      const list = [];
      if (this.proofImgList.length) {
        list.push({
          fileType: "19",
          filePath: this.proofImgList[0].url,
        });
      }
      if(await this.validIsJoinAct()){
        this.$toast({
          message: "参与报名活动后不能修改结算卡",
          duration: 2000,
          forbidClick: true,
        });
        return;
      }
      var mrcAccount = {
        accountCity: this.data.mrcAccount.accountCity,
        accountDistrict: this.data.mrcAccount.accountDistrict,
        accountIdcard: this.data.mrcAccount.accountIdcard,
        accountIdcardExp: this.data.mrcAccount.accountIdcardExp,
        accountName: this.data.mrcAccount.accountName,
        accountNo: this.data.mrcAccount.accountNo,
        accountProvince: this.data.mrcAccount.accountProvince,
        bankAccountMobile: this.data.mrcAccount.bankAccountMobile,
        bankId: this.data.mrcAccount.bankId,
        bankIdHo: this.data.mrcAccount.bankIdHo,
        cardImg: this.justImg,
        card2Img: this.just2Img,
        idcard1Img: this.data.mrcAccount.idcard1Img,
        idcard2Img: this.data.mrcAccount.idcard2Img,
      };
      if (this.$route.query.type == 1) {
        var data = {
          id: this.data.id,
          agentBusinessNo: this.data.agentBusinessNo,
          changeType: [3],
          latitude: this.data.latitude,
          longitude: this.data.longitude,
          merchantAddress: this.data.merchantAddress,
          merchantCity: this.data.merchantCity,
          merchantDistrict: this.data.merchantDistrict,
          merchantProvince: this.data.merchantProvince,
          mrcAccountRates: this.data.mrcAccountRates,
          mrcAccount: mrcAccount,
          mrcAccountAttach: list,
        };
      } else {
        var data = {
          id: this.data.id,
          agentBusinessNo: this.data.agentBusinessNo,
          changeType: [3],
          latitude: this.data.latitude,
          longitude: this.data.longitude,
          merchantAddress: this.data.merchantAddress,
          storeCity: this.data.merchantCity,
          storeDistrict: this.data.merchantDistrict,
          storeProvince: this.data.merchantProvince,
          storeAccountRates: this.data.mrcAccountRates,
          storeAccount: mrcAccount,
          storeAccountAttach: list,
        };
      }
      this.$refs.form
        .validate()
        .then(() => {
          this.$toast({
            type: "loading",
            message: "正在提交...",
            forbidClick: true,
            duration: 0,
          });
          save(data, this.$route.query.type)
            .then((res) => {
              this.$toast.clear();
              if (res.code == 200) {
                this.$router.push({
                  path: "/mreinfo/settlesuccess",
                });
              } else {
                this.$toast({
                  message: res.msg || "操作失败",
                  duration: 2000,
                  forbidClick: true,
                });
              }
            })
            .catch((err) => {
              this.$toast.clear();
            });
        })
        .catch(() => {
          //验证失败
        });
    },
    onOversize() {
      this.$toast("图片过大无法上传\n请上传10MB以内的图片！");
    },
    //银行卡反面
    uploadBankCard2Img(file) {
      file.status = "uploading";
      file.message = "上传中...";
      this.just2Img = "";
      imgPreview(file.file, (params) => {
        if (!params) {
          file.status = "";
          file.message = "";
          this.bankCard2List = [];
          return;
        }
        uploadImg(params)
          .then((res) => {
            if (res.code == 200) {
              const { link } = res.data;
              this.bankCard2List = [];
              this.bankCard2List.push({
                url: link,
              });
              this.just2Img = link;
            }
          })
          .catch((err) => {
            file.status = "failed";
            file.message = "上传失败";
            this.$toast({
              message: err.msg,
              duration: 2000,
            });
          });
      });
    },
    // 银行卡反面
    deleteBankCard2Img() {
      this.$dialog
        .alert({
          title: "移除图片",
          message: "是否确定移除该图片？",
          closeOnClickOverlay: true,
          confirmButtonColor: "#FFB72F",
        })
        .then(() => {
          this.just2Img = "";
          this.bankCard2List = [];
        });
    },
    //法人手持商户关系证明
    uploadproofImg(file) {
      file.status = "uploading";
      file.message = "上传中...";
      imgPreview(file.file, (params) => {
        if (!params) {
          file.status = "";
          file.message = "";
          this.proofImgList = [];
          return;
        }
        uploadImg(params)
          .then((res) => {
            if (res.code == 200) {
              const { link } = res.data;
              file.status = "done";
              this.proofImgList = [];
              this.proofImgList.push({ url: link });
            }
          })
          .catch((err) => {
            file.status = "failed";
            file.message = "上传失败";
            this.$toast({
              message: err.msg,
              duration: 2000,
            });
          });
      });
    },
    deleteproofImg(file) {
      this.$dialog
        .alert({
          title: "移除图片",
          message: "是否确定移除该图片？",
          closeOnClickOverlay: true,
          confirmButtonColor: "#FFB72F",
        })
        .then(() => {
          this.proofImgList = [];
        });
    },
    // 下载模版
    downloadExample() {
      console.log(this.templateUrl);
      if (this.templateUrl) {
        savePicture(this.templateUrl);
      } else {
        this.$toast("模板获取失败，请联系客服");
      }
    },
    getChannelTemplateFun(form) {
      // 结算类型为非法对私 切开户类型不为
      const merchantAccountType = Number(form.merchantAccountType);
      console.log(form, merchantAccountType, "merchantAccountType");
      if (merchantAccountType === 3) {
        getChannelTemplate(form.defaultChannelCode).then((res) => {
          const { data, code } = res;
          if (code === 200) {
            this.templateUrl = data.relationCertImageUrl;
          } else {
            this.$toast("模板获取失败，请联系客服");
          }
        });
      }
    },
  },
};
</script>
<style lang='less' scoped>
.settleinfo {
  padding-bottom: 87px;
  //   padding-top: 26px;
  background-color: #f7f7f7;
  //   overflow-x: hidden;
  .settleinfo_form {
    margin-bottom: 26px;
  }
  .form_account {
    margin-bottom: 28px;
    // margin: 28px 0;
  }
  .field-image /deep/ .van-image {
    width: 100%;
    height: 400px;
    background: #191919;
    img {
      width: auto;
      margin: 0 auto;
    }
  }
  /deep/ .van-field__label {
    // font-size: 32px;
    color: #3d3d3d;
  }
  /deep/ .van-field__control {
    // font-size: 32px;
    color: #131313;
  }
}
.submitbtn {
  height: 80px;
  background: #ffb72f;
  border: #ffb72f;
  border-radius: 40px;
  margin: auto;
  //   margin-top: 40%;
  font-size: 30px;
  width: 90%;
}
/deep/ .van-nav-bar__text {
  color: #ffb72f;
}
// :-moz-ui-invalid
.attach-item {
  margin-top: 24px;
  background: #fff;
  padding: 35px 32px;
  p.attach-item-title {
    font-size: 30px;
    font-weight: 400;
    color: #131313;
  }

  .upload-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    .attach-label {
      width: 45%;
      padding-left: 5px;
    }
    .upload-item {
      margin-top: 20px;
    }
    p {
      font-size: 28px;
      font-weight: 400;
      color: #131313;
      margin: 12px 0;
      text-align: center;
      opacity: 0.8;
    }
    .example {
      display: flex;
      align-items: center;
      color: #ffb72f;
      justify-content: center;
    }
  }
}
/deep/.van-uploader {
  width: 334px;
  height: 224px;
}
/deep/.van-uploader__wrapper {
  width: 334px;
  height: 224px;
}
/deep/.van-uploader__preview-image {
  width: 334px;
  height: 224px;
}
/deep/.van-uploader__preview {
  width: 334px;
  height: 224px;
}
img {
  width: 334px;
  height: 224px;
}
/deep/.van-dialog__content {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 57px 0;
}
/deep/.van-uploader {
  width: 334px;
  height: 224px;
}
/deep/.van-uploader__wrapper {
  width: 334px;
  height: 224px;
}
/deep/.van-uploader__preview-image {
  width: 334px;
  height: 224px;
}
/deep/.van-uploader__preview {
  width: 334px;
  height: 224px;
}
</style>